<template>


  <el-button size="default" type="default" @click="backToList()">返回</el-button>
  <div class="info-pad">


      <div class="cardBored">

          <el-row :gutter="20" style="height: 35px; margin-top: 30px">
              <el-col :span="2">（头像）</el-col>
              <el-col :span="4">{{ dataDetail.creatorName }}</el-col>
              <el-col :span="2">
                  <el-tag type="warning" size="default">
                      {{ typeMap.get(dataDetail.type) }}
                  </el-tag>
              </el-col>
              <el-col :span="14" style="float: right">
                  <el-tag style="margin-left: 3px" v-for="tag in dataDetail.tagList" size="small" type="success">
                      {{ tag.name }}
                  </el-tag>
              </el-col>
          </el-row>

          <el-row :gutter="20" style="height: auto">
              <el-col :span="18">
                  <h1>{{ dataDetail.title }}</h1>
              </el-col>
              <el-col :span="6">{{ dataDetail.gmtCreateTime }}</el-col>
          </el-row>
          <hr>
      </div>

      <div class="content">
              {{ dataDetail.content }}
      </div>
<!--      <hr>-->

    <ul v-if="dataDetail.fileList">
      <li v-for="file in dataDetail.fileList" class="file-li">
          {{ file.title }} |
          {{ file.url }}
      </li>
    </ul>
      <hr>
      <div style="margin-bottom: 60px">
          <el-button type="primary" size="large" style="float: right; margin-left: 10px" @click="wait()">
              收藏
          </el-button>
          <el-button type="primary" size="large" style="float: right; margin-left: 10px" @click="sendComment()">
              评论
          </el-button>
          <el-button type="default" size="large" style="float: right; margin-left: 10px" @click="getDetail">
              获取信息
          </el-button>
      </div>

  </div>

    回复：
    <el-input type="textarea" v-model="comment.content" />

  <div class="comment-pad">
      <ul>
          <li v-for="item in dataDetail.commentList" class="commentLi">

              <el-row :gutter="20" style="height: 35px">
                  <el-col :span="2">头像</el-col>
                  <el-col :span="8">{{ item.creatorName }}</el-col>
                  <el-col :span="8"></el-col>
                  <el-col :span="6">
                      {{ item.gmtCreateTime }}
                  </el-col>
              </el-row>
              <div class="content" style="background-color: lightblue">
                  {{ item.content }}
              </div>
          </li>
      </ul>

  </div>




</template>



<script setup>
import {ref} from "vue";
import {getPostList} from "@/api/request";
import {Search} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";
import {useRoute, useRouter} from "vue-router";

const pageNum = ref(1)
const pageSize = ref(10)
const pageSizeList = ref([10, 20, 30, 40])
const total = ref(0)
const startTime = ref("")
const endTime = ref("")
const loginUserId = ref("")
const loginUserName = ref("")

const router = useRouter()
const route = useRoute()

const typeMap = ref(new Map([
    ['1', "求助"],
    ['2', "教程"],
    ['3', "讨论"],
    ['4', "分享"],
    ['5', "其他"]
]))

const dataDetail = ref({
  creatorId: "",
  creatorName: "",
  gmtCreateTime: "",
  modifierId: "",
  modifierName: "",
  gmtModifyTime: "",
  id: "",
  title: "",
  type: "",
  content: "",
  tagIds: "",
  tagIdList: [
    {
      id: "",
      name: "",
      type: "",
      hotCount: 0,
      creatorId: "",
      creatorName: "",
      gmtCreateTime: "",
      modifierId: "",
      modifierName: "",
      gmtModifyTime: ""
    }
  ],
  fileUrls: "",
  fileList: [],
  status: "",
  backReason: "",

    // creatorId: "1",
    // creatorName: "无敌战神",
    // gmtCreateTime: "2013-01-02",
    // modifierId: "",
    // modifierName: "",
    // gmtModifyTime: "",
    // id: "1",
    // title: "标题标题",
    // type: "1",
    // content: "正文正文",
    // tagIds: "",
    // tagIdList: [
    //     {
    //         id: "1",
    //         name: "阴阳师",
    //         type: "1",
    //         hotCount: 0,
    //         creatorId: "",
    //         creatorName: "",
    //         gmtCreateTime: "",
    //         modifierId: "",
    //         modifierName: "",
    //         gmtModifyTime: ""
    //     }
    // ],
    // fileUrls: "",
    // fileList: [],
    // status: "",
    // backReason: "被驳回",
})

const comment = ref({
    postId: route.params.id,
    content: "",
    parentId: ""
})

const reqParam = ref({
    loginUserId: "",
    loginUserName: "",
    pageNum: 1,
    pageSize: 20,
    startTime: "",
    endTime: "",
    searchContent:""
})

function handleSizeChange() {
    // 再次请求
    getList(reqParam.value)
}
function handleCurrentChange() {
    getList(reqParam.value)
}
async function getList(req) {
    req.pageNum = pageNum.value
    req.pageSize = pageSize.value
    let param = reqParam.value
    req.searchContent = param.searchContent
    let resp = await getPostList(req, "/post/list");
    console.log(resp)
    dataList.value = resp.list
    total.value = resp.total
}

function resetCondition() {
    reqParam.value = {
        pageNum: 1,
        pageSize: 20,
        startTime: "",
        endTime: "",
        searchContent:""
    }
    pageNum.value = 1
    pageSize.value = 20
    getList(reqParam)
}

const dataList = ref([])


function wait() {
    ElMessage.info("功能开发中，敬请期待....")
}

async function sendComment(parentId) {
  if (comment.value.content == null || comment.value.content === "") {
    ElMessage.error("不能回复空内容!!!")
    return
  }
    comment.value.parentId = parentId
    let resp = await getPostList(
        comment.value,
        "/comment/add"
    )
    if (resp.code === 200) {
        ElMessage.success("评论成功")
        comment.value.content = ""
        comment.value.parentId = ""
      await getDetail()
    }else {
        ElMessage.error("评论失败")
    }

}

async function getDetail() {
    let resp = await getPostList({
        // id: id.values()
        id: route.params.id
    }, "/post/detail")
    console.log(resp)
    dataDetail.value = resp.data
}

function backToList() {
  router.back()
}

</script>

<style scoped>

.content {
    width: 80%;
    background-color: white;
    color: black;
    margin-left: 5%;
}

.info-pad {
    text-align: left;
    background-color: white;
}
.commentLi {
    list-style: none;
    text-align: left;
    background-color: lightblue;
  margin-top: 10px;
}
.file-li {
    list-style: none;
}

.selectInput {
    margin: 10px;
    width: 100%;
    height: 25%;
}

#list {
    font-size: 1em;
}
.liStyle {
    padding: 0;
    align-self: center;
    align-content: center;
    background-color: gray;
    margin: 0;
    list-style: none;
    height: 50px;
    width: 100%;
    background-color: #d3d4d6;
    border-width: 3px;
    border-color: black;

}
.bottom-font {
    width: 100%;
    height: 80px;
    font-size: 10px;
    padding: 0;
}


</style>